<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #myMap {
            width: 600px;
            height: 600px;
            border: 1px solid red;
        }
    </style>
    <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=aF4dfBtsBD209YNrVcj40nWV7Lm4CQb6"></script>
    <script>
        /*
        点击搜索按钮，获取用户选择额城市和地址信息，将文本地址解析为Point对象，
        创建目标Point对象的标注和消息框，展示地址信息，设置地图的中心点为当前Point对象


        添加标记，标记添加拖拽完成事件，获取拖拽完成时的Point对象，解析Point对象为文本地址，创建消息框，展示文本地址
        */
        window.onload = function () {
            //创建地图对象
            var myMap = new BMapGL.Map('myMap');
            //设置地图的中心点及级别
            myMap.centerAndZoom(new BMapGL.Point(104.069944, 30.579012), 15);
            //滚轮控制地图展示级别
            myMap.enableScrollWheelZoom();
            //绑定按钮点击事件
            document.querySelector('[type="button"]').onclick = function () {
                //获取用户选择的城市
                var city = document.querySelector('#city').value;
                //获取用户输入地址
                var address = document.querySelector('#address').value;
                //地址解析
                //创建解析对象
                var geo = new BMapGL.Geocoder();
                //实现地址正向解析 文本地址->Point
                geo.getPoint(address, function (point) {
                    // console.log(point);
                    //创建标注
                    var marker = new BMapGL.Marker(point);
                    //将标注添加到地图上
                    myMap.addOverlay(marker);
                    //地址逆向解析 point->文本地址
                    geo.getLocation(point, function (re) {
                        //创建消息框
                        var win = new BMapGL.InfoWindow(re.address, {
                            width: 200,
                            height: 100,
                            title: '地址解析结果'
                        });
                        //在地图上打开消息框
                        myMap.openInfoWindow(win, point);
                        //设置地图中心
                        myMap.centerAndZoom(point, 15);
                    });

                }, city);
            }
        }

    </script>
</head>

<body>
    <select id="city">
        <option>成都市</option>
        <option>北京市</option>
        <option>西安市</option>
        <option>上海市</option>
    </select>
    <input type="text" id="address">
    <input type="button" value="搜索">
    <div id="myMap"></div>
</body>

</html>